<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="referrer" content="no-referrer" />
		<title>axiosGetData</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style>
			.container {
				margin-top: 50px;
			}

			.content {
				margin: 30px 15px 15px;
				width: 170px;
				height: 180px;
				position: relative;
				float: left;
			}

			.content .title {
				font-size: 14px;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin: 10px 0 8px;
			}

			.content .ctime {
				font-size: 10px;
				color: #999;
			}

			.content .mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container" id="app">
			<h3 style="text-align: center;">动漫快讯</h3>
			<div>
				显示第
				<input type="number" v-model.number="page" @keyup.enter="getData" />
				页，每页显示
				<input type="number" v-model.number="count" @keyup.enter="getData" />
				条数据
			</div>
			<div class="content" v-for="news in newslist">
				<img :src="news.picUrl">
				<p class="title">{{news.title}}</p>
				<p class="ctime">{{news.ctime}}</p>
				<a :href="news.url" class="mask"></a>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					page: 1,
					count: 10,
					newslist: []
				},
				methods: {
					getData: function() {
						const _this = this;
						// axios.get('https://api.tianapi.com/dongman/index?key=a59b8f72b8dac755e8b4c98dbb1e47a3&num=5')
						axios.get('https://api.tianapi.com/dongman/index', {
							params: {
								key: 'a59b8f72b8dac755e8b4c98dbb1e47a3',
								num: this.count,
								page: this.page //此时的this还是指向vue组件
							}
						}).then(res => {
							//天行数据接口
							//此时不能用this，因为已经不是vue对象了
							_this.newslist = res.data.newslist;
						})
					}
				},
				created: function() {
					this.getData();
				}
			})
		</script>
	</body>
</html>
